<!DOCTYPE html>
<html>

<head>
    <meta charset='utf-8' />
    <title>Join local JSON data with vector tile geometries</title>
    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
    <link rel="stylesheet" href="lib/mapbox-gl.css">
    <style>
        body {
            margin: 0;
            padding: 0;
        }

        #map {
            position: absolute;
            top: 0;
            bottom: 0;
            width: 100%;
        }
        #zoom {
            position: absolute;
            top: 20px;
            right: 20px;
            z-index: 99;
            background: rgba(0,0,0,0.4);
            color: white;
            padding: 5px;
            border-radius: 5px;
        }
    </style>
</head>

<body>
<div id='map'>
    <div id="zoom">14.6</div>
</div>
<script src="lib/mapbox-gl.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/Turf.js/6.5.0/turf.min.js"></script>
<script>
    const style = {
        "version": 8,
        "name": "indoor-map",
        "sources": {},
        "layers": [{
            id: 'background',
            type: 'background',
            paint: {
                'background-color': 'rgba(255,0,0,0)'
            }
        }]
    }
    var map = new mapboxgl.Map({
        container: 'map',
        zoom: 16.4,
        minZoom: 16,
        maxZoom: 22,
        center: [113.887, 22.551],
        pitch: 45,
        bearing: -17.6,
        antialias: true,
        style
    });
    map.addControl(new mapboxgl.ScaleControl({}), 'bottom-right');
    map.on('zoomend', function() {
        document.getElementById('zoom').innerText = map.getZoom().toFixed(2)
    })
    map.on('load', function() {
        const coords = [ [ [ 113.885632905452397, 22.552818892926712 ], [ 113.885771878698918, 22.553046303693751 ], [ 113.886302503822009, 22.553484279985827 ], [ 113.887106864127674, 22.554212836702447 ], [ 113.887443768967728, 22.554246527186454 ], [ 113.888075465542826, 22.55364430978485 ], [ 113.888214438789362, 22.553412687707311 ], [ 113.890008457062649, 22.551715529575528 ], [ 113.889991611820648, 22.55150075273999 ], [ 113.88778909642879, 22.549538282046655 ], [ 113.88754484041975, 22.549454055836641 ], [ 113.887182667716687, 22.549407731421134 ], [ 113.886353039548055, 22.54956776122016 ], [ 113.885784512630451, 22.549727791019198 ], [ 113.88556552448442, 22.550098386343258 ], [ 113.885632905452397, 22.552818892926712 ] ] ]
        let lon = []
        coords[0].forEach(([x, y]) => {
            lon.push(x)
        })
        lon = lon.sort((a, b) => a - b)
        const deltX = lon[lon.length - 1] - lon[0]
        const coordsHighlight = [
            coords[0].map(([x, y]) => [x - deltX, y])
        ]
        const floorNums = 10, floorHeight = 20, floorTop = 2
        let features = [], featuresH = []
        for (let i = 0; i <= floorNums; i++) {
            const baseH = i * floorHeight,
                topH = baseH + floorHeight,
                h = topH - floorTop
            const feature = {
                "type": "Feature",
                "properties": {height: h, baseHeight: baseH, type: 'building', floor: i},
                "geometry": { "type": "Polygon", "coordinates": coords }
            }
            features.push(feature)
            features.push({
                "type": "Feature",
                "properties": {height: topH, baseHeight: h, type: 'top', floor: i},
                "geometry": { "type": "Polygon", "coordinates": coords }
            })
            // 高亮图层
            const buffer = turf.buffer(feature, 0.001)
            featuresH.push(turf.difference(buffer, feature))
            // featuresH.push({
            //   "type": "Feature",
            //   "properties": {height: h, baseHeight: baseH, type: 'building', floor: i},
            //   "geometry": { "type": "Polygon", "coordinates": coordsHighlight }
            // })
        }
        console.log(features)
        map.addSource('building', {
            type: 'geojson',
            data: {
                "type": "FeatureCollection",
                "features": features
            }
        });
        map.addSource('building-hightlight', {
            type: 'geojson',
            data: {
                "type": "FeatureCollection",
                "features": featuresH
            }
        });
        map.loadImage('', function (error, image) {
            if (error) throw error;
            map.addImage('building-wl', image);

            map.addLayer({
                'id': '3d-buildings',
                'source': 'building',
                'type': 'fill-extrusion',
                filter: ['==', ['get', 'type'], 'building'],
                'paint': {
                    'fill-extrusion-color': '#ffffff',
                    'fill-extrusion-pattern': 'building-wl',
                    'fill-extrusion-height': ['get', 'height'],
                    'fill-extrusion-base': ['get', 'baseHeight'],
                    'fill-extrusion-opacity': 1
                }
            });
            map.addLayer({
                'id': '3d-buildings-top',
                'source': 'building',
                'type': 'fill-extrusion',
                filter: ['==', ['get', 'type'], 'top'],
                'paint': {
                    'fill-extrusion-color': [
                        'match',
                        ['get', 'floor'],
                        floorNums, '#bbb4ab',
                        '#ffffff'
                    ],
                    'fill-extrusion-height': ['get', 'height'],
                    'fill-extrusion-base': ['get', 'baseHeight'],
                    'fill-extrusion-opacity': 1
                }
            });

            map.addLayer({
                'id': '3d-buildings-highlight',
                'source': 'building-hightlight',
                'type': 'fill-extrusion',
                filter: ['==', ['get', 'floor'], -1],
                'paint': {
                    'fill-extrusion-color': '#00ffe8',
                    // 'fill-extrusion-pattern': 'building-wl',
                    'fill-extrusion-height': ['get', 'height'],
                    'fill-extrusion-base': ['get', 'baseHeight'],
                    'fill-extrusion-opacity': 0.5
                }
            });
            // map.addLayer({
            //     'id': '3d-buildings-top-highlight',
            //     'source': 'building-hightlight',
            //     'type': 'fill-extrusion',
            //     filter: ['==', ['get', 'floor'], -1],
            //     'paint': {
            //         'fill-extrusion-color': '#bbb4ab',
            //         'fill-extrusion-height': ['+', ['get', 'height'], floorTop],
            //         'fill-extrusion-base': ['get', 'height'],
            //         'fill-extrusion-opacity': 1
            //     }
            // });

            map.on('click', e => {
                // map.setFilter('3d-buildings', ['!=', ['get', 'floor'], -1])
                map.setFilter('3d-buildings-highlight', ['==', ['get', 'floor'], -1])
                // map.setFilter('3d-buildings-top-highlight', ['==', ['get', 'floor'], -1])
            })
            map.on('click', '3d-buildings', e => {
                const { properties } = e.features[0]
                // map.setFilter('3d-buildings', ['!=', ['get', 'floor'], properties.floor])
                map.setFilter('3d-buildings-highlight', ['==', ['get', 'floor'], properties.floor])
                // map.setFilter('3d-buildings-top-highlight', ['==', ['get', 'floor'], properties.floor])
            })
        })
    });
</script>
</body>
</html>